<template>
	<div>
		<el-form class="container">
			<el-row :gutter="20">
			  <el-col :span="6">
				  <div class="grid-content bg-purple1">
						<h2>{{list.productName}}</h2>
						<div>产品名称</div>
					</div>
				</el-col>
			 
				<el-col :span="6">
				  <div class="grid-content bg-purple2">
						<h2>{{list.batch}}</h2>
						<div>批号</div>
					</div>
				</el-col>
				
			  <el-col :span="6">
				  <div class="grid-content bg-purple3">
						<h2 v-if="list.outNum == '' || list.outNum == null">0</h2>
						<h2 v-else>{{list.outNum}}</h2>
						<div>出库数量</div>
					</div>
			  </el-col>

				<el-col :span="6">
				  <div class="grid-content bg-purple4">
						<h2>{{list.number}}</h2>
						<div>剩余数量</div>
					</div>
				</el-col>
			</el-row>
		</el-form>
		<div class="container" style="margin-top:20px;">
			<h3>出入库明细</h3>
			<el-table
			    :data="list.storageManageDetaileds"
			    border
				style="margin-top:20px;"
			    ref="multipleTable"
			    header-cell-class-name="table-header">
			    <el-table-column prop="type" sortable label="类型"></el-table-column>
			    <el-table-column prop="specs" sortable label="规格"></el-table-column>
			    <el-table-column prop="number" sortable label="数量"></el-table-column>
			    <el-table-column prop="createtime" sortable label="时间"></el-table-column>
				<el-table-column prop="clientName" sortable label="客户名称"></el-table-column>
				<el-table-column prop="" sortable label="追溯码">
					<template slot-scope="scope">
						<el-button type="text" @click="downLoad(scope.$index, scope.row)">下载追溯码</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="container" style="margin-top:20px;">
			<h3>养护记录</h3> 
			<div style="margin-top:20px; border-bottom:1px solid #999;" v-for="(item,index) in list.storageManageCuringList" :key="index">
				<div style="display: inline-block;width:30%;float: left;">
					<div style="margin:0 0 20px 20px;" v-for="(s,zindex) in item.curings" :key="zindex">
						<h4>{{s.content}}</h4>
						<div>{{s.standard}}</div>
					</div>
				</div>
				<div style="display:inline-block;">
					<img :src="$store.state.pathimg + item.img" alt="" style="width:200px;height:200px;">
				</div>
				<div style="display:inline-block;float: right;margin-top:50px;">
					<div>开始时间：{{item.startTime}}      养护人：{{item.curingName}}</div>
					<div>结束时间：{{item.endTime}}       养护标准：{{item.storageCuring}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { storage_findById ,storage_manage_down_codes} from "@/request/api"
	export default {
		data(){
			return{
				tableData:[],
				id:'',
				list:{}
			}
		},
		mounted() {
			this.id = this.$route.query.id
			this.init()
		},
		methods:{
			downLoad(index,row){
				if(row.type == "入库"){
					let str = "type=in&storageId=" + row.storageManageId
					storage_manage_down_codes(str).then((res)=>{
						this.exportRaw('追溯码.txt',res)
					})
				}else{
					let str = "type=out&storageId=" + row.storageManageId
					storage_manage_down_codes(str).then((res)=>{
						this.exportRaw('追溯码.txt',res)
					})
				}
				
			},
			fakeClick(obj) {
			  var ev = document.createEvent("MouseEvents");
			  ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
			  obj.dispatchEvent(ev);
			},
			exportRaw(name, data) {
			  var urlObject = window.URL || window.webkitURL || window;
			  var export_blob = new Blob([data]);
			  var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
			  save_link.href = urlObject.createObjectURL(export_blob);
			  save_link.download = name;
			  this.fakeClick(save_link);
			},
			init(){
				storage_findById(this.id).then((res)=>{
					this.list = res.data
					for(var i=0;i<this.list.storageManageCuringList.length;i++){
						if(this.list.storageManageCuringList[i].startTime){
							this.list.storageManageCuringList[i].startTime = this.list.storageManageCuringList[i].startTime.substring(0,10)
						}
						if(this.list.storageManageCuringList[i].endTime){
							this.list.storageManageCuringList[i].endTime = this.list.storageManageCuringList[i].endTime.substring(0,10)
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99a9bf;
	  }
	  .bg-purple1 {
	    background: #409EFF 10000%;
	  }
	  .bg-purple2 {
	    background: #F56C6C 10000%;
	  }
	  .bg-purple3 {
	    background: #67C23A 10000%;
	  }
	  .bg-purple4 {
	    background: #909399 10000%;
	  }
	  .bg-purple-light {
	    background: #e5e9f2;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 80px;
		color:white;
	  }
	  .grid-content div{
		  text-align: right;
		  font-size:14px;
		  margin-top:4px;
		  padding-right:20px;
	  }
	  .row-bg {
	    padding: 10px 0;
	    background-color: #f9fafc;
	  }
	  h2{
		  color:white;
		  text-align: right;
		  padding-top:20px;
		  padding-right:20px;
	  }
</style>
